<template>
    <div class="page-container">
      <page-header title="中国能源有限公司OA项目">
        <a-space>
          <a-button>终止</a-button>
          <a-button>冻结</a-button>
          <a-button type="primary">项目开始</a-button>
        </a-space>
      </page-header>

      <div class="page-card">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="合同">
            <div class="table-filter">
              <div class="filter-left">

                <div class="filter-row">
                  <div class="row-title">报备状态：</div>
                  <div class="row-content">
                    <div v-for="(item,index) in filters1" :key="index" class="row-checkbox">
                      <a-checkbox>
                        {{ item.title }}
                      </a-checkbox>
                    </div>
                  </div>
                </div>

                <div class="filter-row">
                  <div class="row-title">项目类型：</div>
                  <div class="row-content">
                    <div v-for="(item,index) in filters2" :key="index" class="row-checkbox">
                      <a-checkbox>
                        {{ item.title }}
                      </a-checkbox>
                    </div>
                  </div>
                </div>

                <div class="filter-row">
                  <div class="row-title">相关客户：</div>
                  <div class="row-content">
                    <div class="row-select">
                      <a-select
                          show-search
                          placeholder="选择相关客户"
                          option-filter-prop="children"
                      >
                        <a-select-option value="jack">
                          Jack
                        </a-select-option>
                        <a-select-option value="lucy">
                          Lucy
                        </a-select-option>
                        <a-select-option value="tom">
                          Tom
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                </div>

                <div class="filter-row">
                  <div class="row-title">关联项目：</div>
                  <div class="row-content">
                    <div class="row-select">
                      <a-select
                          show-search
                          placeholder="选择关联项目"
                          option-filter-prop="children"
                      >
                        <a-select-option value="jack">
                          项目1
                        </a-select-option>
                        <a-select-option value="lucy">
                          项目2
                        </a-select-option>
                        <a-select-option value="tom">
                          项目3
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                </div>

              </div>


              <div class="filter-right">
                <div class="filter-search">
                  <a-input-search placeholder="输入项目名称" />
                </div>
              </div>
            </div>

            <div class="table-wrap">
              <div class="table-header">
                <div class="font-wb">共计<span class="font-c-master margin-lr5">502</span>条数据</div>
              </div>
              <a-table :columns="columns" :data-source="data" bordered>
                <div slot="priority" slot-scope="priority">
                  <a-tag
                      :color="priority === '高' ? 'volcano' : 'green'"
                  >
                    {{ priority }}
                  </a-tag>
                </div>

                <div slot="urgency" slot-scope="urgency">
                  <a-tag
                      :color="urgency === '紧急' ? 'volcano' : 'green'"
                  >
                    {{ urgency }}
                  </a-tag>
                </div>

                <div slot="progress" slot-scope="progress">
                  <a-progress :percent="progress" />
                </div>

              </a-table>
            </div>
          </a-tab-pane>

          <a-tab-pane key="2" tab="资料">
            <a-table :columns="columns2" :data-source="data2" bordered :pagination="false">
              <span slot="handle">
                <span class="red hover margin-r20">删除</span>
                <span class="blue hover">编辑</span>
              </span>
            </a-table>
          </a-tab-pane>

          <a-tab-pane key="3" tab="费用">
            <a-table :columns="columns3" :data-source="data3" bordered :pagination="false">
            </a-table>
          </a-tab-pane>

          <a-tab-pane key="4" tab="人员">
            <div class="display-f">
              <a-row class="width50 padding-tb10">
                <a-col :span="4">
                  项目负责人:
                </a-col>
                <a-col :span="20">
                  <div class="border-bottom padding-b10">李四</div>
                </a-col>
              </a-row>

              <a-row class="width50 padding-tb10">
                <a-col :span="4">
                  项目监控人:
                </a-col>
                <a-col :span="20">
                  <div class="border-bottom padding-b10">张总</div>
                </a-col>
              </a-row>
            </div>

            <div class="border height-200 margin-t30 padding-10">
              <a-tag style="margin-bottom: 10px;" v-for="(item,index) in 20" :key="index" closable>
                李雷
              </a-tag>
              <a-tag style="margin-bottom: 10px;" v-for="(item,index) in 20" :key="index" closable>
                韩梅梅
              </a-tag>

              <a-tag color="blue">
                <a-icon type="plus" />添加人员
              </a-tag>
            </div>
          </a-tab-pane>

          <a-tab-pane key="5" tab="详情">
            <a-row class="padding-tb10">
              <a-col :span="2">
                立项编号:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">GC2028855539299</div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2">
                项目名称:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">中国能源有限公司OA项目 <a-tag color="blue">进行中</a-tag></div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2">
                项目类型:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">产品实施类</div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2">
                项目模板:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">产品实施类模板</div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2">
                相关客户:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">
                  <a-tag>云南能投集团</a-tag>
                  <a-tag>云南城投集团</a-tag>
                </div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2">
                关联项目:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">
                  <a-tag>能投集团建设二期</a-tag>
                  <a-tag>能投集团建设三期</a-tag>
                  <a-tag>能投集团建设四期</a-tag>
                </div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2">
                材料附件:
              </a-col>
              <a-col :span="10">
                <div class="border-bottom padding-b10">
                  <a-tag>项目需求20211201.doc</a-tag>
                  <a-tag>客户访问记录.doc</a-tag>
                </div>
              </a-col>
            </a-row>

            <a-row class="padding-tb10">
              <a-col :span="2">
                材料附件:
              </a-col>
              <a-col :span="10">
                <div class="border padding-10">
                  说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane key="6" tab="讨论">
            <a-textarea placeholder="输入评论..." :rows="4" />
            <a-button type="primary" style="margin-top: 10px;">发布</a-button>

            <a-list style="margin-top: 40px;" item-layout="horizontal" :data-source="listData">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta
                    :description="item.content"
                >
                  <div slot="title">{{ item.user }}</div>
                  <a-avatar
                      slot="avatar"
                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  />
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-tab-pane>

          <a-tab-pane key="7" tab="操作日志">
            <a-table :columns="columns4" :data-source="data4" bordered :pagination="false"></a-table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
</template>

<script>
export default {
  name: "projectDetail",
  data(){
    return {
      filters1: [
        {
          title: '草稿',
          value: '1'
        },
        {
          title: '审批中',
          value: '2'
        },
        {
          title: '已确立',
          value: '3'
        },
        {
          title: '被驳回',
          value: '4'
        },
        {
          title: '进行中',
          value: '5'
        },
        {
          title: '已冻结',
          value: '6'
        },
        {
          title: '已终止',
          value: '7'
        },
        {
          title: '已结束',
          value: '8'
        },
        {
          title: '已归档',
          value: '9'
        }
      ],
      filters2: [
        {
          title: '类型1',
          value: '1'
        },
        {
          title: '类型2',
          value: '2'
        },
        {
          title: '类型3',
          value: '3'
        },
        {
          title: '类型4',
          value: '4'
        }
      ],
      columns: [
        {
          title: '项目名称',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
        },
        {
          title: '项目负责人',
          dataIndex: 'person',
          key: 'person',
          ellipsis: true,
        },
        {
          title: '优先级',
          dataIndex: 'priority',
          key: 'priority',
          scopedSlots: { customRender: 'priority' },
        },
        {
          title: '紧急程度',
          dataIndex: 'urgency',
          key: 'urgency',
          scopedSlots: { customRender: 'urgency' },
        },
        {
          title: '项目进度',
          dataIndex: 'progress',
          key: 'progress',
          scopedSlots: { customRender: 'progress' },
        },
        {
          title: '项目类型',
          dataIndex: 'type',
          key: 'type',
          ellipsis: true,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          ellipsis: true,
          sorter: (a, b) => a.date - b.date
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true
        },
      ],
      data: [
        {
          key: '1',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '2',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '低',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '3',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '不紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        },
        {
          key: '4',
          name: '云南能投建设项目一期',
          person: '张三',
          priority: '高',
          urgency: '紧急',
          progress: 64,
          type: '开发项目',
          createTime: '2016-03-05',
          status: '进行中'
        }
      ],
      columns2: [
        {
          title: '文件名称',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '说明',
          dataIndex: 'desc',
          key: 'desc',
          ellipsis: true,
        },
        {
          title: '所属',
          dataIndex: 'type',
          key: 'type',
          ellipsis: true,
        },
        {
          title: '操作人',
          dataIndex: 'operator',
          key: 'operator'
        },
        {
          title: '操作时间',
          dataIndex: 'time',
          key: 'time'
        },
        {
          title: '操作',
          dataIndex: 'handle',
          key: 'handle',
          scopedSlots: { customRender: 'handle' },
        },
      ],
      data2: [
        {
          key: '1',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        },
        {
          key: '2',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        },
        {
          key: '3',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        },
        {
          key: '4',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        },
        {
          key: '5',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        },
        {
          key: '6',
          name: '需求报告.docx',
          desc: '说明说明说明说明',
          type: '合同:xxxxxxxxx',
          operator: '张三',
          time: '2021-03-06 18:22:20'
        }
      ],
      columns3: [
        {
          title: '月份',
          dataIndex: 'month',
          key: 'month'
        },
        {
          title: '收入',
          dataIndex: 'income',
          key: 'income'
        },
        {
          title: '支出',
          dataIndex: 'expend',
          key: 'expend'
        },
        {
          title: '收支差',
          dataIndex: 'dif',
          key: 'dif'
        }
      ],
      data3: [
        {
          key: '1',
          month: '1月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '2',
          month: '2月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '3',
          month: '3月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '4',
          month: '4月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '5',
          month: '5月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '6',
          month: '6月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '7',
          month: '7月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '8',
          month: '8月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '9',
          month: '9月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '10',
          month: '10月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '11',
          month: '11月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '12',
          month: '12月',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        },
        {
          key: '13',
          month: '总计',
          income: '￥ 3465.00',
          expend: '￥ 3465.00',
          dif: '￥ -3465.00'
        }
      ],
      listData: [
        {
          key: '1',
          user: '王浩然',
          content: '内容内容内容内容内容内容内容内容内容内容内容内容',
        },
        {
          key: '2',
          user: '李雷',
          content: '内容内容内容内容内容内容内容内容内容内容内容内容',
        },
        {
          key: '3',
          user: '韩梅梅',
          content: '内容内容内容内容内容内容内容内容内容内容内容内容',
        },
      ],
      columns4: [
        {
          title: '操作人',
          dataIndex: 'operator',
          key: 'operator'
        },
        {
          title: '操作时间',
          dataIndex: 'time',
          key: 'time'
        },
        {
          title: '操作类别',
          dataIndex: 'type',
          key: 'type'
        },
        {
          title: '动作',
          dataIndex: 'action',
          key: 'action'
        },
        {
          title: '历史值',
          dataIndex: 'history',
          key: 'history'
        },
        {
          title: '修改值',
          dataIndex: 'edit',
          key: 'edit'
        }
      ],
      data4: [
        {
          key: '1',
          operator: '张三',
          time: '2021-03-06 18:22:20',
          type: '项目名称',
          action: '编辑',
          history: '没有',
          edit: '哈哈哈啊哈',
        },
        {
          key: '2',
          operator: '张三',
          time: '2021-03-06 18:22:20',
          type: '项目名称',
          action: '编辑',
          history: '没有',
          edit: '哈哈哈啊哈',
        },
        {
          key: '3',
          operator: '张三',
          time: '2021-03-06 18:22:20',
          type: '项目名称',
          action: '编辑',
          history: '没有',
          edit: '哈哈哈啊哈',
        }
      ],
    }
  },
  mounted(){

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
</style>
